<template>
    <div class="userInfo">
        <head-v :text="title">
            <go-back slot="goback"></go-back>
        </head-v>
        <div class="base-info">
            <ul>
                <li class="special">
                    <span>头像</span>
                    <img :src="user.img" alt="">
                    <span class="angle-position"><i class="icon-angle-right"></i></span>
                </li>
                <li>
                    <span>用户名</span>
                    <span class="grey">{{user.name}}</span>
                </li>
                <li>
                    <span>性别</span>
                    <span class="angle-position-normal"><i class="icon-angle-right"></i></span>
                    <span class="grey-special">{{user.gender}}</span>                 
                </li>
            </ul>
            <ul>
                <li>
                    <span>部门</span>
                    <span class="grey">{{user.department}}</span>
                </li>
                <li>
                    <span>岗位</span>
                    <span class="grey">{{user.post}}</span>
                </li>
                <li>
                    <span>手机号</span>
                    <span class="angle-position-normal"><i class="icon-angle-right"></i></span>
                    <span class="grey-special">{{user.tel}}</span>                 
                </li>
                <li>
                    <span>邮箱</span>
                    <span class="angle-position-normal"><i class="icon-angle-right"></i></span>
                    <span class="grey-special">{{user.email}}</span>                 
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Header from '../Header.vue'
    import GoBack from '../../components/GoBack.vue'
    export default{
        data(){
            return{
                title:'个人资料',
                user:{
                    img:"../../../static/lux_1.jpg",
                    name:"超级玛丽",
                    gender:"女",
                    department:"产品部",
                    post:"产品经理",
                    tel:"13951000000",
                    email:"30000000@qq.com"
                }
            }
        },
        components:{
            HeadV:Header,
            GoBack
        }
    }
</script>
<style lang="scss">
    @import "../../assets/css/function.scss";
    .userInfo{
        .base-info{
            ul{
                background:#fff;
                padding:0 pxToRem(16px);
                overflow:hidden;
                margin-top:pxToRem(12px);
                li{
                    list-style:none;
                    font-size:pxToRem(16px);
                    padding:pxToRem(10px) pxToRem(4px) pxToRem(10px) pxToRem(12px);
                    border-bottom:2px solid #eee;
                    height:pxToRem(30px);
                    line-height:pxToRem(30px);
                    .grey{
                        color:#ccc;
                        float:right;
                        margin-right:pxToRem(25px);
                    }
                    .grey-special{
                        color:#ccc;
                        float:right;
                        margin-right:pxToRem(18px);
                    }
                    .angle-position-normal{
                        float:right;
                        color:#ccc;
                        font-size:pxToRem(25px);
                    }

                }
                li:last-child{
                    border:none;
                }
                .special{                    
                    padding:pxToRem(4px) pxToRem(4px) pxToRem(4px) pxToRem(10px);
                    height:pxToRem(68px);
                    span{
                        float:left;
                        height:pxToRem(68px);
                        line-height:pxToRem(68px);
                    }
                    img{
                        position:relative;
                        left:pxToRem(150px);
                        width:pxToRem(60px);
                        height:pxToRem(60px);
                        border:2px solid #ccc;
                        border-radius:50%;
                    }
                    .angle-position{
                        float:right;
                        font-size:pxToRem(25px);
                        height:pxToRem(68px);
                        line-height:pxToRem(68px);
                        color:#ccc;
                    }
                }
            }
        }
    }
</style>